A rotating video/Bar chart using CSS3 3D transformations

Use Google Chrome to see the video (a WebM video).

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    /**
    * If the browser is Chrome the element that spins is a WebM video. If not then it's an RGraph Bar chart.
    */
    if (RGraph.ISCHROME) {
        document.write('<video id="myElement" src="../video/video.webm" controls autoplay loop ></video>');
    } else {
        document.write('<canvas id="myElement" width="600" height="250">[No canvas support]</canvas>');
        
        var bar = new RGraph.Bar({
            id: 'myElement',
            data: [4,8,6,8,7],
            options: {
                labels: ['John','Fred','George','Paul','Ringo']
            }
        }).draw();
    }




    /**
    * Initially the x/y/z angles are all zero
    */
    x = 0;
    y = 0;
    z = 0;




    /**
    * This is the spin function that gets called repeatedly and sets the appropriate CSS3 values.
    * It calls itself again at the end after a small delay.
    */
    mySpinFunc = function ()
    {
        /**
        * Set the appropriate CSS3 properties for WebKit browsers
        */
        document.getElementById("myElement").style.WebkitTransform = 'rotate3d(1,0,0, ' + x + 'deg) rotate3d(0,1,0, ' + y + 'deg) rotate3d(0,0,1, ' + z + 'deg)';
        
        /**
        * Set the unprefixed CSS3 properties (for Firefox, MSIE 10 etc)
        */
        document.getElementById("myElement").style.transform = 'rotate3d(1,0,0, ' + x + 'deg) rotate3d(0,1,0, ' + y + 'deg) rotate3d(0,0,1, ' + z + 'deg)';

        /**
        * Increment the X/Y/Z angles
        */
        x += 3;
        y += 3;
        z += 3;

        /**
        * Call ourselves again after a small delay
        */
        setTimeout(mySpinFunc, 50);
    }
    
    mySpinFunc();
</script>